<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="前端,Vue.js,JavaScript,Node.js,小程序">
  
  
    <meta name="description" content="GuoYou.Li(李国有)的博客, 用于做学习过程中的笔记、总结以及知识分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    简单的了解 HTTP 协议 |
    
    种子的信仰</title>
  
    <link rel="shortcut icon" href="/your/favicon.ico">
  
  
<link rel="stylesheet" href="/your/css/style.css">

  
    
<link rel="stylesheet" href="/your/fancybox/jquery.fancybox.min.css">

  
  
<script src="/your/js/pace.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/your/atom.xml" title="种子的信仰" type="application/atom+xml">
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-http" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      简单的了解 HTTP 协议
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/your/2020/06/06/http/" class="article-date">
  <time datetime="2020-06-06T15:16:20.000Z" itemprop="datePublished">2020-06-06</time>
</a>
                            
  <div class="article-category">
    <a class="article-category-link" href="/your/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a> / <a class="article-category-link" href="/your/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/http/">http</a>
  </div>

                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <blockquote>
<p>Web 使用一种名为 HTTP（HyperText Transfer Protocol，超文本传输协议）的协议作为规范，完成从客户端到服务器等一系列运作流程。而协议是指规则的约定。可以说，Web 是建立在 HTTP 协议上通信的。</p>
</blockquote>
<h2 id="HTTP-协议的主要特点"><a href="#HTTP-协议的主要特点" class="headerlink" title="HTTP 协议的主要特点"></a>HTTP 协议的主要特点</h2><h3 id="1-简单快速"><a href="#1-简单快速" class="headerlink" title="1.简单快速"></a>1.简单快速</h3><p>客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有 GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于 HTTP 协议简单，使得 HTTP 服务器的程序规模小，因而通信速度很快。</p>
<h3 id="2-灵活"><a href="#2-灵活" class="headerlink" title="2.灵活"></a>2.灵活</h3><p>HTTP 允许传输任意类型的数据对象。正在传输的类型由 Content-Type（Content-Type 是 HTTP 包中用来表示内容类型的标识）加以标记</p>
<h3 id="3-无连接"><a href="#3-无连接" class="headerlink" title="3.无连接"></a>3.无连接</h3><p>无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。</p>
<p>早期这么做的原因是 HTTP 协议产生于互联网，因此服务器需要处理同时面向全世界数十万、上百万客户端的网页访问，但每个客户端（即浏览器）与服务器之间交换数据的间歇性较大（即传输具有突发性、瞬时性），并且网页浏览的联想性、发散性导致两次传送的数据关联性很低，<strong>大部分通道实际上会很空闲、无端占用资源。</strong>因此 HTTP 的设计者有意利用这种特点将协议设计为<strong>请求时建连接、请求完释放连接，以尽快将资源释放出来服务其他客户端。</strong></p>
<p>随着时间的推移，网页变得越来越复杂，里面可能嵌入了很多图片，这时候每次访问图片都需要建立一次 TCP 连接就显得很低效。后来，<strong>Keep-Alive</strong> 被提出用来解决这效率低的问题。</p>
<p>Keep-Alive 功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接。市场上的大部分 Web 服务器，包括 iPlanet、IIS 和 Apache，都支持 HTTP Keep-Alive。对于提供静态内容的网站来说，这个功能通常很有用。但是，对于负担较重的网站来说，这里存在另外一个问题：虽然为客户保留打开的连接有一定的好处，但它同样影响了性能，因为在处理暂停期间，本来可以释放的资源仍旧被占用。当 Web 服务器和应用服务器在同一台机器上运行时，Keep-Alive 功能对资源利用的影响尤其突出。</p>
<p>这样一来，<strong>客户端和服务器之间的 HTTP 连接就会被保持，不会断开（超过 Keep-Alive 规定的时间，意外断电等情况除外）</strong>，当客户端发送另外一个请求时，就使用这条已经建立的连接。</p>
<h3 id="4-无状态"><a href="#4-无状态" class="headerlink" title="4.无状态"></a>4.无状态</h3><p>无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录任何信息。</p>
<p>客户端与服务器进行动态交互的 Web 应用程序出现之后，HTTP 无状态的特性严重阻碍了这些应用程序的实现，毕竟交互是需要承前启后的，简单的购物车程序也要知道用户到底在之前选择了什么商品。于是，两种用于保持 HTTP 连接状态的技术就应运而生了，一个是 Cookie，而另一个则是 Session。</p>
<h3 id="5-支持客户-服务器模式"><a href="#5-支持客户-服务器模式" class="headerlink" title="5.支持客户/服务器模式"></a>5.支持客户/服务器模式</h3><h2 id="HTTP-报文的组成部分"><a href="#HTTP-报文的组成部分" class="headerlink" title="HTTP 报文的组成部分"></a>HTTP 报文的组成部分</h2><h3 id="请求报文"><a href="#请求报文" class="headerlink" title="请求报文"></a>请求报文</h3><ul>
<li>请求行</li>
<li>请求头</li>
<li>空行</li>
<li>请求体</li>
</ul>
<h3 id="响应报文"><a href="#响应报文" class="headerlink" title="响应报文"></a>响应报文</h3><ul>
<li>状态行</li>
<li>响应行</li>
<li>空行</li>
<li>响应体</li>
</ul>
<h2 id="HTTP-方法"><a href="#HTTP-方法" class="headerlink" title="HTTP 方法"></a>HTTP 方法</h2><ol>
<li>GET 获取资源</li>
<li>POST 传输资源</li>
<li>PUT 更新资源</li>
<li>DELETE 删除资源</li>
<li>HEAD 获取报文首部</li>
</ol>
<h3 id="POST-和-GET-的区别"><a href="#POST-和-GET-的区别" class="headerlink" title="POST 和 GET 的区别"></a>POST 和 GET 的区别</h3><ul>
<li>GET 在浏览器回退时是无害的，而 POST 会再次提交请求</li>
<li>GET 产生的 URL 地址可以被收藏</li>
<li>GET 请求只能进行 url 编码，而 POST 支持多种编码方式</li>
<li>GET 请求会被浏览器主动缓存</li>
<li>GET 请求在 URL 中传送的参数是有长度限制的</li>
<li>对参数的数据类型，GET 只接受 ASCLL 字符，而 POST 没有限制</li>
<li>GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息</li>
<li>GET 参数通过 URL 传递，而 POST 放在 Request body 中</li>
</ul>
<h2 id="HTTP-状态码"><a href="#HTTP-状态码" class="headerlink" title="HTTP 状态码"></a>HTTP 状态码</h2><p><strong>常见状态码：</strong></p>
<p>100~199：表示成功接收请求，要求客户端继续提交下一次请求才能完成整个处理过程。</p>
<p>200~299：表示成功接收请求并已完成整个处理过程。常见 200<br>200：OK 客户端请求成功<br>206: Partial Content 客户发送了一个带有 Range 头的 GET 请求，服务器完成了它</p>
<p>300~399：为完成请求，客户需进一步细化请求。<br>302：请求的资源已经移动一个新地址、<br>304：客户端有缓存的文档，并发出了一条件性的请求，服务端告诉客户，原来缓存的文档还可以继续使用</p>
<p>400~499：客户端的请求有错误<br>400：客户端请求有语法错误，不能被服务器所理解<br>401：请求未经授权，这个状态码必须和 WWW-Authenticate 报头域一起使用<br>403：对被请求页面的访问被禁止<br>404：请求资源不存在</p>
<p>500~599：服务器端出现错误<br>500：服务器发生不可预期的错误，<br>503：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常</p>
<h2 id="什么是持久连接"><a href="#什么是持久连接" class="headerlink" title="什么是持久连接"></a>什么是持久连接</h2><p>HTTP 协议采用”请求-应答”模式，当使用普通模式，即非 KeepAlive 模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接 （无连接的特点）</p>
<p>当使用 KeepAlive 模式，（又称持久连接，连接重用）时，Keep-Alive 功能是客户端到服务端的连接持续有效，当出现对服务器的后继请求时，KeepAlive 功能避免了建立或者重新建立连接</p>
<h2 id="什么是管线化"><a href="#什么是管线化" class="headerlink" title="什么是管线化"></a>什么是管线化</h2><p>管线化机制须通过永久连接完成，仅 HTTP/1.1 支持此技术（HTTP/1.0 不支持）</p>
<p>在使用持久连接的情况下，某个连接消息的传递类似于</p>
<p>请求 1 -&gt; 响应 1 -&gt; 请求 2 -&gt; 响应 2</p>
<p>管线化：某个连接上的消息变成了类似这样</p>
<p>请求 1 -&gt; 请求 2 -&gt; 请求 3 -&gt; 响应 1 -&gt; 响应 2 -&gt; 响应 3</p>
<p><strong>那么持久连接和管线化的区别在于：</strong></p>
<ul>
<li><p>持久连接的一个缺点是请求和响应式是顺序执行的，只有在请求 1 的响应收到之后，才会发送请求 2，而管线化不需要等待上一次请求得到响应就可以进行下一次请求。实现并行发送请求。</p>
</li>
<li><p>只有 GET 和 HEAD 要求可以进行管线化，而 POST 则有所限制</p>
</li>
<li><p>初次创建连接时也不应启动管线机制，因为对方（服务器）不一定支持 HTTP/1.1 版本的协议。</p>
</li>
<li><p>HTTP1.1 要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败，而且现在很多服务器端和代理程序对管线化的支持并不好，现代浏览器 Chrome 和 Firefox 默认并未开启管线化支持。</p>
</li>
</ul>
<p>以上为学习笔记，</p>
<p><strong>参考</strong></p>
<p><a href="https://coding.imooc.com/class/115.html" target="_blank" rel="noopener">慕课网的课程</a><br><a href="https://www.cnblogs.com/xuxinstyle/p/9813654.html" target="_blank" rel="noopener">深入理解 http 协议的特点 - 博客园</a></p>
<p><strong>收藏</strong> (待读)</p>
<p><a href="https://juejin.im/post/5cd0438c6fb9a031ec6d3ab2" target="_blank" rel="noopener">前端基础篇之 HTTP 协议 - 掘金</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <!-- 注释 - 分享按钮 -->
                                        <!-- <a data-url="http://liguoyou.gitee.io/your/2020/06/06/http/" data-id="cl0gvpjqk000sm4onep541j5c" class="article-share-link">
                                            分享
                                        </a> -->
                                        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/http/" rel="tag">http</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/keepAlive/" rel="tag">keepAlive</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/%E6%8C%81%E4%B9%85%E8%BF%9E%E6%8E%A5/" rel="tag">持久连接</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/%E7%8A%B6%E6%80%81%E7%A0%81/" rel="tag">状态码</a></li></ul>

                                    </footer>

    </div>

    
        
  <nav class="article-nav">
    
      <a href="/your/2020/06/12/remove-event-listener/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            EventTarget.removeEventListener() 取消监听事件不起作用(失效)的原因
          
        </div>
      </a>
    
    
      <a href="/your/2020/06/05/prototype/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">JS中的构造函数、原型与原型链</div>
      </a>
    
  </nav>


            

                
                    
                        
  <div class="gitalk" id="gitalk-container"></div>
  <p style="color: #999; font-size: 12px; text-align: center;">
    第三方评论系统 -- Gitalk: 偶尔可能出现加载失败的情况, 您可以选择刷新或者前往 
    <a href="https://github.com/liguoyou/your/issues" target="_blank">issues</a>
    提交和查看评论
  </p>
  
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

  
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '2e731d2b04096a7c71ab',
      clientSecret: '41e2e15eb8edebd8efd5a6da558a44d60f33468a',
      repo: 'your',
      owner: 'liguoyou',
      admin: ['liguoyou'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2022 种子的信仰</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/your/"><img src="/your/images/logo.png" alt="种子的信仰"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/">首页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/archives">时间轴</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/categories">分类</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/tags">标签</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/your/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="请输入关键词...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/your/js/jquery-2.0.3.min.js"></script>


<script src="/your/js/jquery.justifiedGallery.min.js"></script>


<script src="/your/js/lazyload.min.js"></script>


<script src="/your/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/your/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/your/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/your/js/ocean.js"></script>


</body>
</html>